<template>
  <div>
    <Row>
      <ButtonGroup shape="circle" style="position:fixed;right:20px;">
        <Button type="success" icon="md-copy" @click="onCopyScript" style="float:right;">复制脚本</Button>
      </ButtonGroup>
    </Row>
    <Row>
      <pre ref="scripts">{{ ddl }}</pre>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ddl: ''
    };
  },
  methods: {
    GetTableDDL() {
      let dbIndex = this.$route.params.dbIndex;
      let schema = this.$route.params.schema;
      let tableName = this.$route.params.tableName;

      if (dbIndex && schema && tableName) {
        this.$http.get(`/api/${this.$route.query.dbtype}/${dbIndex}/${schema}/${tableName}/ddl`).then(res => (this.ddl = res.data['Create Table']));
      }
    },
    onCopyScript() {
      this.$copyText(this.$refs.scripts.innerText).then(() => {
        this.$Message.success('脚本已复制！');
      });
    }
  },
  watch: {
    $route: function() {
      this.GetTableDDL();
    }
  },
  mounted() {
    this.GetTableDDL();
  }
};
</script>
